<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('入队申请信息表')" />
</head>
<style>
    body {
        position: relative;
    }

    /*拒绝的原因和理由描述弹出块div*/
    #refuse {
        width: 60%;
        height: 45%;
        position: absolute;
        left: 20%;
        top: 25%;
        background-color: white;
        border-radius: 2px;
        z-index: 1000;
        display: none;
    }

    /*拒绝页面的右上角关闭x的div*/
    .refuse-x {
        position: absolute;
        right: 10px;
        top: -2px;
        cursor: pointer;
        font-size: 30px;
    }

    /*拒绝页面的title行div*/
    .refuse-title-line {
        width: 100%;
        height: 18%;
        border-bottom: 1px solid #DADADA;
    }

    /*拒绝页面的title行中的title内容div*/
    .refuse-title {
        width: 10%;
        height: 100%;
        font-size: 20px;
        font-weight: bold;
        color: black;
        padding: 15px 0 0 0;
        text-align: center;
    }

    /*拒绝页面的reason行div*/
    .refuse-reason-line {
        width: 96%;
        height: 18%;
        margin-top: 4%;
        margin-left: 2%;
    }

    /*拒绝页面的description行div*/
    .refuse-description-line {
        width: 96%;
        height: 30%;
        margin-left: 2%;
    }

    /*拒绝页面的reason和description行中的标签div*/
    .reason-label, .description-label {
        width: 15%;
        height: 60%;
        color: black;
        font-size: 20px;
        float: left;
    }

    /*拒绝页面的reason和description行中的值div*/
    .reason-value, .description-value {
        width: 85%;
        height: 60%;
        float: left;
    }

    /*拒绝页面的button行div*/
    .refuse-btn-line {
        width: 100%;
        height: 30%;
        position: relative;
    }

    /*拒绝页面的button行的确认按钮*/
    .confirm {
        width: 12%;
        height: 40%;
        position: absolute;
        top: 30%;
        right: 20%;
        background-color: #03AAF4;
        color: white;
        border: none;
    }

    /*拒绝页面的button行的关闭按钮*/
    .cancel {
        width: 12%;
        height: 40%;
        position: absolute;
        top: 30%;
        right: 5%;
        background-color: #EEEEEE;
        color: black;
        border: none;
    }

    /*遮罩层*/
    #mask {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 999;
        background-color: black;
        opacity: 0.4;
        display: none;
    }
</style>

<body class="gray-bg" id="parentBody">

    <div class="container-div">
        <div class="row">
            <!--    搜索模块    -->
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <p>姓名：</p>
                                <input type="text" name="volunteerName"/>
                            </li>

                            <li>
                                <p>申请部门：</p>
                                <select name="sectorId">
                                    <option value="">所有</option>
                                    <option th:each="item:${sectorList}"
                                            th:value="${item.sectorId}"
                                            th:text="${item.sectorName}">
                                    </option>
                                </select>
                            </li>

                            <li>
                                <p>学院名称：</p>
                                <select name="academyId">
                                    <option value="">所有</option>
                                    <option th:each="item:${academyList}"
                                            th:value="${item.academyId}"
                                            th:text="${item.academyName}">
                                    </option>
                                </select>
                            </li>

                            <li>
                                <p>最高学历：</p>
                                <select name="volunteerDegree" th:with="type=${@dict.getType('degree')}">
                                    <option value="">所有</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                            th:value="${dict.dictValue}"></option>
                                </select>
                            </li>

                            <!-- 需要自己写sql条件 -->
                            <li class="select-time">
                                <p>申请时间：</p>
                                <input type="text" class="time-input" id="startTime" style="width: 133px" placeholder="请选择开始时间" name="beginDate"/>
                                <span>至</span>
                                <input type="text" class="time-input" id="endTime" style="width: 133px" placeholder="请选择结束时间" name="endDate"/>
                            </li>
                            <li>
                                <a class="btn btn-success btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>搜索</a>
                                <a class="btn btn-warning btn-sm" onclick="reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                    <!--    额外搜索条件   -->
                    <input name="memberState" value="1" id="chooseMemberState" style="display: none"/>
                </form>
            </div>

            <!--    功能模块    -->
            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-white" onclick="selectPendingApproval()">待审批</a>
                <a class="btn btn-white" onclick="selectSuccessApproval()">审核通过</a>
                <a class="btn btn-white" onclick="selectFailApproval()">审核不通过</a>
                <br/>
                <a id="acceptAll" class="btn btn-success multiple" onclick="acceptAll()" shiro:hasPermission="vtsp:apply:acceptAll">
                    <i class="fa fa-send"></i> 批量通过
                </a>
                <a id="refuseAll" class="btn btn-danger multiple" onclick="showRefuseModal1()" shiro:hasPermission="vtsp:apply:refuseAll">
                    <i class="fa fa-remove"></i> 批量拒绝
                </a>
            </div>

            <!--    信息表格    -->
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table">
                    <thead>
                    <tr>
                        <th data-checkbox="true"></th>
                        <th data-formatter="fm_rowIndex" data-align="center">序号</th>
                        <th data-field="volunteerName">姓名</th>
                        <th data-field="sexName">性别</th>
                        <th data-field="sectorName">申请部门</th>
                        <th data-field="volunteerAcademy">所在学院</th>
                        <th data-field="volunteerProfession">专业</th>
                        <th data-field="volunteerClass">所在班级</th>
                        <th data-field="volunteerNo">学号</th>
                        <th data-field="volunteerDegree" data-formatter="fm_degree">学历</th>
                        <th data-field="createTime">申请时间</th>
                        <th data-formatter="fm_commands" data-width="120px" data-align="center">操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <!--    拒绝弹出层-->
    <div id="refuse">
        <div class="refuse-x" onclick="closeRefuseModal()">×</div>
        <div class="refuse-title-line">
            <div class="refuse-title">拒绝</div>
        </div>
        <div class="refuse-reason-line">
            <div class="reason-label">拒绝理由:</div>
            <div class="reason-value">
                <select id="refuseReason" name="refuseReason" th:with="type=${@dict.getType('refuse_reason')}" style="width: 100%;font-size: 20px">
                    <option value="">请选择</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="refuse-description-line">
            <div class="description-label">
                原因描述:
            </div>
            <div class="description-value">
                <textarea id="refuseDescription" rows="4" cols="30" style="resize: none; width: 100%; font-size: 20px"></textarea>
            </div>
        </div>
        <div class="refuse-btn-line">
            <button class="confirm" onclick="refuseAll()">确定</button>
            <button class="cancel" onclick="closeRefuseModal()">关闭</button>
        </div>
    </div>
    <!--    弹出层附带的遮罩层-->
    <div id="mask"></div>

    <th:block th:include="include :: footer" />
    <script id="parent-script" th:inline="javascript">
        /**
         * 初始配置
         */
        let prefix = ctx + "vtsp/apply";
        let editFlag = [[${@permission.hasPermi('vtsp:apply:edit')}]];
        //  路径变量初始化
        $(function() {
            var options = {
                url: prefix + "/list",
                updateUrl: prefix + "/edit/{id}",
                modalName: "入队申请",
                uniqueId: "volunteerId"
            };
            //bootstrap表格初始化加载options
            $.table.init(options);
        });

        /**
         * 学历字典
         */
        //  学历字典数据
        let degree_dict = [[${@dict.getType('degree')}]];
        //  根据字典的学历格式转化器
        function fm_degree(value, row ,index) {
            return $.table.selectDictLabel(degree_dict, value);
        }

        /**
         * 表格操作列按钮格式转化
         */
        //  formatter函数
        function fm_commands(value, row, index){
            var actions = [];
            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.volunteerId + '\')"><i class="fa fa-edit"></i>查看</a> ');
            return actions.join('');
        }

        /**
         * 功能按钮，筛选 1.待审核 2.审核通过 3.审核不通过
         */
        //  获取搜索form表单中隐藏的用于筛选memberState的DOM，默认值为1(显示待审核)
        let chooseMemberState = document.getElementById("chooseMemberState");
        //  获取批量通过按钮
        let acceptAllBtn = document.getElementById("acceptAll");
        //  获取批量拒绝按钮
        let refuseAllBtn = document.getElementById("refuseAll");
        //  查询待审核的志愿者列表
        function selectPendingApproval() {
            //  memberState = 1
            chooseMemberState.setAttribute("value", "1");
            //  批量通过按钮显示
            acceptAllBtn.style.visibility = "visible";
            //  批量拒绝按钮显示
            refuseAllBtn.style.visibility = "visible";
            //  表格按条件重新搜索加载
            $.table.search();
        }
        //  查询审核通过的志愿者列表
        function selectSuccessApproval() {
            //  memberState = 6
            chooseMemberState.setAttribute("value", "6");
            //  批量通过按钮隐藏
            acceptAllBtn.style.visibility = "hidden";
            //  批量拒绝按钮隐藏
            refuseAllBtn.style.visibility = "hidden";
            //  表格按条件重新搜索加载
            $.table.search();
        }
        //  查询审核不通过的志愿者列表
        function selectFailApproval() {
            //  memberState = 3
            chooseMemberState.setAttribute("value", "3");
            //  批量通过按钮隐藏
            acceptAllBtn.style.visibility = "hidden";
            //  批量拒绝按钮隐藏
            refuseAllBtn.style.visibility = "hidden";
            //  表格按条件重新搜索加载
            $.table.search();
        }
        //  重置全部的选择条件，
        function reset() {
            //  显示待审核的志愿者列表
            selectPendingApproval();
            //  重置搜索框内容
            $.form.reset();
        }

        /**
         * 同意入队申请的实现
         */
        //  批量同意多条申请
        function acceptAll(id) {
            //  获取到表格中勾选的数据行
            let rows = $('#bootstrap-table').bootstrapTable('getSelections');
            //  待通过的id数组
            let idArr = [];
            //  若id不为null，则说明是来自详情页调用的本方法，是单个通过
            if(id) {
                idArr[0] = id;
            }
            //  否则是本页面调用的本方法，是批量通过
            else {
                for (let i = 0; i < rows.length; i++) {
                    idArr[i] = rows[i].volunteerId;
                }
            }
            let ids = idArr.join(",");
            let url = prefix + "/acceptAll";
            let data = {"ids" : ids};
            $.operate.submit(url, "post", "json", data);
        }

        /** 拒绝入队申请的实现 */
        //  拒绝弹窗1，由本页触发，弹出div#refuse
        function showRefuseModal1() {
            document.getElementById("refuse").style.display = "block";
            document.getElementById("mask").style.display = "block";
        }

        //  拒绝弹窗2，由子页edit触发，并传过来id，并暂存于idArr中，弹出div#refuse
        let idArr = [];     //  此变量用于暂存查看页传来的volunteerId
        function showRefuseModal2(id) {
            idArr[0] = id;
            document.getElementById("refuse").style.display = "block";
            document.getElementById("mask").style.display = "block";
        }

        //  关闭div#refuse弹窗
        function closeRefuseModal() {
            document.getElementById("refuse").style.display = "none";
            document.getElementById("mask").style.display = "none";
            document.getElementById("refuseReason").value = "";
            document.getElementById("refuseDescription").value = "";
            //  重置idArr为空
            idArr = [];
        }

        //  批量拒绝多条申请
        function refuseAll() {
            //  是否是来自详细信息页
            let flag = false;
            //  拒绝理由和原因描述的赋值
            let index = document.getElementById("refuseReason").selectedIndex;
            let refuseReason = document.getElementById("refuseReason").options[index].text;
            let refuseDescription = document.getElementById("refuseDescription").value;
            //  判断拒绝理由和原因描述是否非空
            if(refuseReason !== "" && refuseDescription !== "") {
                let refuseResult = "拒绝理由:" + refuseReason + "\t\t原因描述:" + refuseDescription;
                //  获取选中行ids(多个，批量)
                let rows = $('#bootstrap-table').bootstrapTable('getSelections');
                let array = [];
                //  若idArr非空，则为单个拒绝
                if(idArr.length === 1) {
                    flag = true;
                    array = idArr;
                }
                else if(rows) {
                    for (let i = 0; i < rows.length; i++) {
                        array[i] = rows[i].volunteerId;
                    }
                }
                let ids = array.join(",");
                let url = prefix + "/refuseAll";
                let data = { "ids": ids, "applyInfo": refuseResult};
                $.operate.submit(url, "post", "json", data);
                closeRefuseModal();
                if(flag) {
                    document.getElementsByTagName("iframe")[0].contentWindow.submitHandler();
                }
            }
            else if (refuseReason === ""){
                alert("请选择拒绝原因!!!");
            }
            else if (refuseDescription === "") {
                alert("请输入原因描述!!!");
            }
        }
    </script>
</body>
</html>
